import React,{ Component,useState } from 'react';
import {
    Collapse,
    message,
} from 'antd';
import { runInAction } from 'mobx';

import FormBasePropertyConfig from '../property.config/formBasePropertyConfig';
import { HlLabeledValue } from 'legions-lunar/model';
import { PropertyFormElementFormFieldsRule } from '../../models/form/propertyFormElement';
import FormProerty from '../../containers/components.property/formProperty';
import { SELECTOPTIONSVALUE,FORM_PROPS } from '../../constants/consts';
import get from 'lodash/get';
import set from 'lodash/set';
import has from 'lodash/has';
import { shortHash } from 'legions-lunar/object-hash';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import { typeSelectValueData } from '../../stores/projectCommonStore';
import { LegionsProForm } from 'legions-pro-design';
const { Panel } = Collapse;
interface IProps { }
@fullProvider(FormPropertySelectConfig)
export default class FormPropertySelectConfig {
    @lazyInject(FormBasePropertyConfig)
    public formBasePropertyConfig!: FormBasePropertyConfig
    /** 下拉选择器属性配置项 */
    createSelectElementConfig(formUtils: InstanceType<typeof LegionsProForm.ProFormUtils>,options: { instance: FormProerty}) {
        const formPropertyApp = options.instance.props.store.context.formPropertyApp;
        const rules = this.formBasePropertyConfig.createRulesInstance<PropertyFormElementFormFieldsRule>(PropertyFormElementFormFieldsRule);
        const projectCommonApp = options.instance.props.store.context.projectCommonApp;
        const selectOptions = this.formBasePropertyConfig.createExecCodeConfig(formUtils,{
            name: 'selectOptionsValue',
            label: '下拉选项',
            rules: rules.selectOptionsValue,
            options: SELECTOPTIONSVALUE,
            visible:true,
            onSetting: () => {
                runInAction(() => {
                    const value = get(formPropertyApp.formProperyElementRef.viewModel.InputDataModel,'selectOptionsValue.value') as HlLabeledValue
                    if (!value) {
                        message.warn('请先下拉选项类型');
                        return;
                    }
                    //@ts-ignore
                    if (value.key === 'remote') { // 选择器远程自动托管
                        projectCommonApp.formSelectValueModalRef.viewModel.visible = true;
                        projectCommonApp.formSelectValueModalRef.viewModel.title = '下拉选项远程搜索配置';
                        projectCommonApp.updateSelectValue('remote',{ remote: null,useScope: 'proForm' });
                    }
                    if (value.key === 'local') {  // 数组List
                        const itemconfig = formPropertyApp.formPropertyDraggerRef.viewModel.getFormItemField(formPropertyApp.propertyFormationVM.editComponentData.keys);
                        const options = get(itemconfig.value,`iFormProps.options`) || [];
                        projectCommonApp.formSelectValueModalRef.viewModel.visible = true;
                        projectCommonApp.formSelectValueModalRef.viewModel.title = '下拉选项编辑';
                        const local:typeSelectValueData[] = [];
                        options.map((item,index) => {
                            local.push({ labelKey: item.key,labelValue: item.value });
                        })
                        projectCommonApp.updateSelectValue('local',{local,useScope:'proForm'})
                        const timeid = setTimeout(() => {
                            const formFields = {}
                            projectCommonApp.computedSelectVModel.selectValueData.map((item) => {
                                formFields[`labelValue`] = { value: item.labelValue };
                                formFields[`labelKey`] = { value: item.labelKey };
                            })
                            const formAddSelectFormRef = projectCommonApp.projectCommonFormRef.addSelLocalListTableForm.form;
                            formAddSelectFormRef.methods.setTableFormDataSource(projectCommonApp.computedSelectVModel.selectValueData);
                            clearTimeout(timeid)
                        },100)
                    }
                })
            }
        })
        this.formBasePropertyConfig.renderRadioButtonConfig(formUtils,{
            name: 'selectModel',
            label: '选择类型',
            rules: rules.selectModel,
            options: [{
                label: '多选',
                value: 'multiple',
            },{
                label: '单选',
                value: 'single',
            }]
        })
        return [
            ...selectOptions,
            formUtils.getFormConfig('selectModel'),

        ]
    }
}